<template>
  <div class="about">
    <div class="design_box1">
      <div class="box1_1">
        <van-image
          round
          width="70"
          height="70"
          src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1948759764,2428978402&fm=26&gp=0.jpg"
        />
      </div>
      <div class="box1_2">
      <router-link to="/home">
      <h3>sun</h3>
      </router-link>
        <p>精美模板</p>
      </div>
      <div class="box1_3">
          <router-link to="/set" class="lj">
           <van-image
          round
          width="26"
          height="26"
          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3797829440,793455928&fm=15&gp=0.jpg"
        />
    </router-link>

       
      </div>
    </div>
    <!-- 我的会员 -->
    <div class="box2">
      <h3>我的会员</h3>
      <p>会员畅享所有模板哦～</p>
      <div>立即开通</div>
    </div>
    <div class="box3">
      <div class="box3_1">
        <i>
          <img src="../assets/订单.png" alt />
        </i>
        <p>我的订单</p>
      </div>
      <div class="box3_2">
        <i>
          <img src="../assets/收藏.png" alt />
        </i>
        <p>我的收藏</p>
      </div>
      <div class="box3_3">
        <i>
          <img src="../assets/客服.png" alt />
        </i>
        <p>联系客服</p>
      </div>
      <div class="box3_4">
        <i>
          <img src="../assets/问题.png" alt />
        </i>
        <p>问题反馈</p>
      </div>
      <div class="box3_5">
        <i>
          <img src="../assets/关于.png" alt />
        </i>
        <p>关于我们</p>
      </div>
    </div>
      <router-link to="/" class="tui">
      <button>退出登录</button>
      </router-link>
    <Bottom></Bottom>
  </div>
</template>
<script>
import Bottom from "@/components/bottom.vue";
export default {
  name: "Home",
  components: {
   Bottom,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.about {
  widows: 100vw;
  height: 100vh;
  position: relative;
  background: #f3f4f9;
}
.design_box1 {
  width: 100vw;
  height: 30vh;
  display: flex;
  background: url(../assets/uc_bg.png) no-repeat;
  background-size: 100%;
}
.box1_1,
.box1_2,
.box1_3 {
  height: 10vh;
  /* background: red; */
  margin-top: 8vh;
}
.box1_1 {
  margin-left: 5vw;
  margin-right: 5vw;
}
.box1_2 {
   width: 45vw;
  margin-right: 5vw;
}

.box1_2 h3 {
  margin-top: 2vh;
  color: white;
  font-weight: 800;
}
.box1_2 p {
  font-size: .75rem;
  color: white;
}
.box1_3 {
  margin-left: 10vw;
}
.box1_3 .van-image {
  margin-top: 24px;
}
.box2 {
  width: 90vw;
  height: 9vh;
  line-height: 9vh;
  margin-left: 5vw;
  margin-top: -7vh;
  display: flex;
  background: url(../assets/vip_bg.png) no-repeat;
  background-size: 100%;
  position: absolute;
}
.box2 h3 {
  font-size: 1rem;
  color: #5e3917;
  font-weight: 700;
  margin-left: 13vw;
}
.box2 p {
  color: #5e3917;
  font-size: .5rem;
  margin-left: 2vw;
}
.box2 div {
  background: #cd9555;
  font-size: .75rem;
  color: #fff;
  margin-left: 4vw;
  border-radius: 20px;
  padding: 0px .7rem;
  height: 5vh;
  line-height: 5vh;
  margin-top: 2vh;
}

/*  我的订单*/
.box3 {
  margin-top: 5vh;
}
.box3 div {
  width: 100vw;
  height: 8vh;
  line-height: 8vh;
  /* border: 1px solid; */
  background: #fff;
  display: flex;
}
.box3 div i {
  width: 4vh;
  height: 4vh;
  margin-top: 1vh;
  margin-left: 5vw;
}
.box3 div i img {
  width: 100%;
  height: 100%;
}
.box3 div p {
  margin-left: 5vw;
  font-size: 18px;
}
.box3_1,.box3_3,.box3_4{
   margin-bottom: 2px;

}
.box3_2 {
  margin-bottom: 2vh;
}

.tui{
  display: block;
  width: 40vw;
  height: 8vh;
  /* border: black 1px solid; */
margin: 3vh auto;
}
.tui>button{
 width: 40vw;
  height: 8vh;
  line-height: 8vh;
  border:none;
  background: #fff;
  color: black;
}
</style>
